<template>
	<scroll-view :scroll-y="true" style="width: 100%;height: 100%;">
		<!-- 模态框提示完善收货地址 -->
		<view>
			<u-modal v-model="showModal" :content="content" :title="title" :mask-close-able="true" z-index="999999"
				:show-cancel-button="true" confirm-text="确定" confirm-color="#FC5E14" @confirm="finishInfo">
			</u-modal>
		</view>
		<u-empty text="还没有任何订单,赶快去购买心仪的商品吧" mode="data" v-if="orderList.length == 0"></u-empty>
		<!-- 订单信息 -->
		<view class="order-info" v-else>
			<view class="order" v-for="order in orderList" :key="order.id">
				<view class="pro-title">
					<view class="icon">
						<image src="../../static/icon/xcx/order.png" mode="widthFix"></image>
					</view>
					<view class="title">
						商品信息
					</view>
				</view>
				<view class="order-content">
					<view class="order-num">
						订单编号：{{order.id}}
					</view>
					<view class="order-list">
						<view class="order-item" v-for="pro in order.proList" :key="pro.uuid">
							<view class="p-img">
								<image :src="pro.image" mode="widthFix"></image>
							</view>
							<view class="p-info">
								<view class="title">
									{{pro.title}}
								</view>
								<view class="guige">
									{{pro.format}}
								</view>
								<view class="remark">
									{{pro.remark}}
								</view>
								<view class="price-box">
									<view class="ptice">
										￥{{(pro.sellPrice / 100).toFixed(2)}}
									</view>
									<view class="count">
										×{{pro.count}}件
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="total">
						<view class="count">
							共计3件商品
						</view>
						<view class="price">
							订单金额：￥{{totalPrice(order.proList)}}
						</view>
						<view class="circle left"></view>
						<view class="circle right"></view>
					</view>
					<!-- 用户操作 -->
					<view class="option">
						<view class="circle left"></view>
						<view class="circle right"></view>
						<view class="opt-item" v-if="order.status == 1" @click="goPay(order.id)">
							去付款
						</view>
						<view class="opt-item" v-else-if="order.status == 3" @click="userOption(3, order.id)">
							收货
						</view>
						<view class="opt-item" v-else-if="order.status == 2" @click="userOption(2, order.id)">
							发货
						</view>
						<view class="opt-item" v-else-if="order.status == 4" @click="userOption(4, order.id)">
							删除订单
						</view>
					</view>
				</view>
			</view>

		</view>
	</scroll-view>

</template>

<script>
	import {
		getLocalData,
		setLocalData,
		removeLocalData
	} from '@/util/localStroage.js'
	export default {
		props: {
			status: Number,
			index: {
				Number
			}
		},
		name: "OrderInfo",
		data() {
			return {
				orderList: [],
				showModal: false,
				content: '',
				title: '',
				currentOrderId: ""
			}
		},
		watch: {
			index() {
				this.requestOrderInfo()
			}
		},
		methods: {
			// 获取订单数据
			requestOrderInfo() {
				if (this.status == 0) {
					this.orderList = getLocalData("orderList")
				} else {
					this.orderList = getLocalData("orderList").filter(order => order.status == this.status)
				}
				console.log(getLocalData("orderList"));
			},
			totalPrice(list) {
				//list 订单商品列表
				let price = 0
				list.forEach(pro => {
					price += pro.sellPrice * pro.count
				})
				if (price > 0) {
					return (price / 100).toFixed(2)
				}
				return '0.00'

			},
			finishInfo() {
				let data = getLocalData('orderList')
				switch (this.title) {
					case "订单发货":
						data.forEach(item => {
							if (item.id == this.currentOrderId) {
								item.status = 3
							}
						})
						setLocalData("orderList", data)
						this.requestOrderInfo()
						break
					case "订单收货":
						data.forEach(item => {
							if (item.id == this.currentOrderId) {
								item.status = 4
							}
						})
						setLocalData("orderList", data)
						this.requestOrderInfo()
						break
					case "删除订单":
						removeLocalData("orderList", this.currentOrderId)
						this.requestOrderInfo()
						break
				}
			},
			goPay(id) {
				uni.navigateTo({
					url: "/pages/orderDetail/orderDetail?id=" + id
				})
			},
			userOption(status, id) {
				this.showModal = true
				this.currentOrderId = id
				switch (status) {
					case 2:
						this.title = "订单发货"
						this.content = "确定要发货吗？"
						break
					case 3:
						this.title = "订单收货"
						this.content = "确认收货吗？"
						break
					case 4:
						this.title = "删除订单"
						this.content = "确认要删除订单吗？"
						break
				}
			}
		},
		created() {
			this.requestOrderInfo()
		}

	}
</script>

<style lang="scss" scoped>
	.order-info {
		padding: 20rpx;

		.order {
			padding: 20rpx 0;
			background-color: #fff;
			margin-top: 20rpx;

			.pro-title {
				padding: 0 20rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 28rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
					}
				}

				.title {
					font-size: 30rpx;
					font-weight: 600;
					transform: translateY(-4rpx);
				}
			}

			.order-content {
				margin-top: 10rpx;
				padding: 0 20rpx;


				.order-num {
					color: #333;
					font-size: 26rpx;
					padding: 10rpx 0;
				}

				.order-list {

					.order-item {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						padding: 10rpx 0 30rpx;


						.p-img {
							width: 120rpx;


							image {
								border: 1px solid #ccc;
								width: 100%;
								border-radius: 10rpx;
							}
						}

						.p-info {
							flex: 1;
							margin-left: 20rpx;

							.title {
								color: #333;
								font-weight: 600;
								font-size: 24rpx;
							}

							.guige {
								font-size: 24rpx;
								color: #777;
							}

							.remark {
								color: #FFA200;
								font-weight: 600;
								font-size: 24rpx;
								padding: 5rpx 0;
							}

							.price-box {
								display: flex;
								justify-content: space-between;
								align-items: center;
								background-color: #eee;
								padding: 10rpx 10rpx 10rpx 0;
								border-radius: 10rpx;



								.ptice {

									color: red;
									font-size: 24rpx;
									font-weight: 700;
								}

								.count {
									color: #333;
									font-size: 24rpx;
								}
							}
						}
					}
				}

				.circle {
					position: absolute;
					top: -20rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 999rpx;
					background-color: #f1f1f1;
				}

				.left {
					left: -40rpx;
				}

				.right {
					right: -40rpx;
				}

				.total {
					border-top: 1px solid #eee;
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;

					.count {
						color: #777;
						font-size: 24rpx;
						padding: 20rpx 0;
					}

					.price {
						color: red;
						font-weight: 700;
						font-size: 24rpx;
						padding: 20rpx 0;
					}
				}

				.option {
					text-align: right;
					padding: 20rpx;
					position: relative;
					border-top: 2rpx solid #eee;

					.opt-item {
						display: inline-block;
						color: #fff;
						background-color: #FC5E14;
						font-size: 24rpx;
						padding: 10rpx 30rpx;
						border-radius: 999rpx;

					}
				}
			}
		}
	}
</style>
